<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Multicolor series</title>
  
	<link rel="stylesheet" charset="utf-8" type="text/css" href="css/styles.css"/>
  
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.src.js"></script>
  <script src="js/multicolor_series.js"></script>
  <script src="js/demo.js"></script>
 
</head>
<body>
<h1>Multicolor series - Highcharts module</h1>

<p>Go to project page to see this module in action: <a href="http://blacklabel.github.io/multicolor_series/">http://blacklabel.github.io/multicolor_series/</a>.</p>

<h3>Requirements</h3>

<p>Plugin requires the latest Highcharts (4+)</p>

<h3>Installation</h3>

<p>Like any other Highcharts module (e.g. exporting), add <code>&lt;script&gt;</code> tag pointing to <code>multicolor_series.js</code> below Highcharts script tag.</p>

<h3>Code</h3>

<p>The latest code is available on github: <a href="https://github.com/blacklabel/multicolor_series/">https://github.com/blacklabel/multicolor_series/</a></p>

<h3>Usage and demos</h3>

<pre><code>
	series: [{
            type: 'coloredline',
            data: [{
            		y: 200,
            		segmentColor: 'red'
            },{
            		y: 210,
            		segmentColor: 'red'
            },{
            		y: 210,
            		segmentColor: 'red'
            },{
            		y: 100,
            		segmentColor: 'green'
            }, {
            		y: 100,
            		segmentColor: 'red'
            }]
	}]
</code></pre>

<h3>Parameters</h3>

<table>
  <thead>
    <tr>
      <th align="left">Property</th>
      <th align="left">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td align="left">point.segmentColor</td>
			<td align="left">Controls line color between N and N+1 point, independent from point.color, which changes marker color.</td>
		</tr>
    <tr>
    	<td align="left">series.type</td>
			<td align="left">Set it to "coloredline" or "coloreadarea" to use multicolor series.</td>
		</tr>
  </tbody>
</table>

<h3>Demo</h3>

<div id="container-line" class="chart"></div>
<div id="container-area" class="chart"></div>

</body>
</html>
